<template>
  <!-- 自定义可拖拽表格组件 -->
  <div>
    <el-scrollbar ref="scrollbarRef" always class="table-srollbar" :scrollbar="false" id="scrollbar" @scroll="handleTableScroll" v-loading="loading">
      <table 
        :class="{
          'ruifox-table-new': true,
          'ruifox-content-table-new': true,
          'can-drag': props.canDrag,
          'doctor-table': modelId == 2
        }"
        ref="ruifoxContentTableRef"
      >
        <colgroup v-if="fieldList?.length">
          <template           
            v-for="(item, index) in fieldList" 
            :key="item.unique || index">
            <col 
              v-show="colShow(item)"
              :width="item.width"
            /> 
          </template>
        </colgroup>
        <thead v-if="fieldList?.length">
          <tr>
            <template v-for="(item, index) in fieldList" :key="item.unique || index">
              <th v-show="colShow(item)"
                :class="{
                  'show-text-tip': item?.showTextTip,
                  'col-left-fixed': item?.fixed === 'left',
                  'col-right-fixed': item?.fixed === 'right',
                  'right-first-fixed': item?.rightFirstFixed && !isEndRightVisible,
                  'left-last-fixed': item?.leftLastFixed && isBeforeVisible,
                }"
                :style="item?.sticktStyle">
                <div class="cell"
                  :style="{
                    textAlign: item.headAlign || 'left'
                  }"
                  :title="item.title">
                  <div class="default-table-header">
                    <div class="default-table-header-left">
                      <span v-if="!item.hideTitle">{{item.title}}</span>
                      <el-dropdown v-if="item?.showFixedIcon">
                        <div class="el-dropdown-link">
                          <i class="iconfont icon-option fixed-icon">&#xe611;</i>
                        </div>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item v-if="item.fixed !== 'left'" @click="handleFixed(item, 'left')">
                              固定在左侧
                            </el-dropdown-item>
                            <el-dropdown-item v-if="item.fixed !== 'right'" @click="handleFixed(item, 'right')">
                              固定在右侧
                            </el-dropdown-item>
                            <el-dropdown-item v-if="item.fixed" @click="handleFixed(item)">
                              取消固定
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="default-table-header-right" v-if="item.slotHeader">
                      <slot :name="item.slotHeader" :headerElement="{...item,index}">
                        <el-dropdown v-if="item.showStatusIcon?.length">
                          <div class="el-dropdown-link">
                            <i class="iconfont icon-option">&#xe73b;</i>
                          </div>
                          <template #dropdown>
                            <el-dropdown-menu >
                              <el-dropdown-item 
                                v-for="(ele, eleIndex) in item.showStatusIcon" 
                                :key="eleIndex"
                                @click="handleStatusClick(item, ele)"
                              >
                                {{ele.label}}
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </slot>
                    </div>
                  </div>
                </div>
              </th>
            </template>
          </tr>
        </thead>
        <template v-if="tableData.length > 0">
          <draggable
            :list="tableData"
            animation="180"
            tag="tbody"
            item-key="id"
            drag-class="drag-class"
            :force-fallback="true"
            group="dragArea"
            filter=".unmover"
            class="list-tbody"
            @sort="handleSort"
            @add="handleContentAdd"
            :disabled="!props.canDrag"
          >
            <template #item="{ element }">
              <tr>
                <template v-for="(_item, _index) in fieldList" :key="_item.unique || _index">
                  <td v-show="colShow(_item)"
                    :class="{
                      'show-text-tip': _item?.showTextTip,
                      'col-left-fixed': _item?.fixed === 'left',
                      'col-right-fixed': _item?.fixed === 'right',
                      'right-first-fixed': _item?.rightFirstFixed && !isEndRightVisible,
                      'left-last-fixed': _item?.leftLastFixed && isBeforeVisible,
                    }"
                    :style="_item?.sticktStyle"
                  >
                    <div class="cell" 
                      :title="_item.showTextTip ? showValue(element,_item.name) : null"
                      :style="{
                        textAlign: _item.textAlign || 'left'
                      }">
                      <!-- 具名插槽 -->
                      <slot :name="_item.slot || _item.name" :element="{...element}">
                        <!-- 不适用插槽时，默认显示的内容 -->
                        <span class="unmover" v-html="showValue(element,_item.name)"></span>
                      </slot>
                    </div>
                  </td>
                </template>
              </tr>
            </template>
          </draggable>
        </template>
      </table>
      <!-- 空数据（可自定义插槽） -->
      <div class="ruifox-table-new-no-data" v-if="tableData.length < 1">
        <slot name="noTableData">
          <i class="iconfont">&#xe642;</i>
          <span>暂无数据</span>
        </slot>
      </div>
      <el-popover
        v-if="props.defaultColumConfig && !loading"
        trigger="click"
      >
        <template #reference>
          <span class="choose-title"><i class="iconfont">&#xe66a;</i></span>
        </template>
        <div class="choose-popup" >
          <div class="popup-title">显示列：</div>
          <div class="ruifox-table-new-choose-list" v-if="fieldList?.length">
            <el-checkbox v-for="item in fieldList.filter(item => item.showToUser != false)" :key="item.id" v-model="item.show" :disabled="item.default" :label="item.title"  size="large" @change="handleColCheckChange"/>
          </div>
        </div>
      </el-popover>
    </el-scrollbar>
    <el-affix position="bottom" v-if="tableOverWidth" :offset="affixOffset" ref="affixRefScroll" style="min-height: 11px;">
      <div ref="topScroll" class="top-scroll">
        <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>
      </div>
    </el-affix>
  </div>
</template>
<script setup>
import { ref, computed, nextTick, watch, onMounted } from 'vue'
import draggable from "vuedraggable";
/* 
fieldList属性：
  title: 表头名称
  slotHeader: 表头插槽名称
  slot: 表体插槽
  width: 20, //宽度
  name: 对应prop:{data}中数据的键值
  show: 是否显示（不传默认显示，传了则使用show控制）
  showToUser: false, //是否给用户展示勾选
  showOtherPlace: true, //不以单独一列展示（如相关附件展示在内容统计里）
  fixed: 'left', //是否固定列（可选‘left’或‘right’）
  showTextTip: true, //（一行 250px）超出显示省略号 
  minWidth: 200 , //最小宽度（width优先级 > minWidth > showTextTipWidth）
  showFixedIcon: false //是否可操作性冻结列
  showStatusIcon: [{label:'',value:''}] //是否可操作性状态选择
  hideTitle: false, //是否隐藏title
  minWidth: 80 //未设置宽度列的最小宽度，默认80
  affixOffset: 65 //固定横向滚动条距底部的高度
*/
const props = defineProps({
  //数据属性
  fieldList: {
    type: Array,
    default: () => {
      return []
    }
  },
  //数据源
  tableData: {
    type: Array,
    default: () => {
      return []
    }
  },
  //是否拖拽排序
  canDrag: {
    type: Boolean,
    default: false
  },
  //加载状态
  loading: {
    type: Boolean,
    default: false
  },
  //未设置宽度的列的最小宽度
  minWidth: {
    type: Number,
    default: 80
  },
  'default-index': {//序号
    type: Boolean,
    default: false
  },
  'default-checkbox': {//多选
    type: Boolean,
    default: false
  },
  'default-colum-config': {//自定义列选项配置
    type: Boolean,
    default: false
  },
  modelId: {
    type: Number,
    default: null
  },
  affixOffset: { //固定横向滚动条距底部的高度
    type: Number,
    default: 65
  }
})
const emits = defineEmits(['update:fieldList','tableData','fieldList','handleSort','handleContentAdd','handleSearch'])
const minWidth = ref(props.minWidth) //列最小宽度
const showTextTipWidth = ref(250) 
const tableOverWidth = ref(false)  //表格是否有滚动条
const modelId = computed(()=>{return props.modelId})
const fieldList = computed({
  get: () => {
    return props.fieldList
  },
  set: (val) => {
    emits('update:fieldList',val)
  }
})
const tableData = computed({
  get: () => {
    props.tableData.forEach((item, index) => {
      item['default-index'] = index + 1 // 序号
    })
    return props.tableData
  },
  set: (val) => {
    emits('update:tableData',val)
  }
})
// 初始化表头列表（添加序号。多选框等）
const handleDealFieldList = () => {
  try {
    if(fieldList.value.length < 1) return
    fieldList.value.forEach(item => {
      item.minWidthAsWidth = false
      //如果使用了showTextTip属性，则给该列赋默认值250px
      if(!item.width && item.showTextTip){ 
        item.width = item.minWidth || showTextTipWidth.value
        if(item.minWidth) item.minWidth = null
      }
      return item
    })
    if(props.defaultIndex && !fieldList.value.find(item => item.name == 'default-index')){
      let obj = {
        title: '序号',
        name:'default-index',
        is_show_control: 1,
        width: 45,
        show: true,
        showToUser: true, //是否给用户展示勾选
        fixed: 'left',
        showFixedIcon: true
      }
      fieldList.value.unshift(obj)
    }
    // 多选
    if(props.defaultCheckbox && !fieldList.value.find(item => item.name == 'default-checkbox')){
      let obj = {
        title: '',
        name:'default-checkbox',
        is_show_control: 1,
        width: 45,
        show: true,
        showToUser: false, //是否给用户展示勾选
        textAlign: 'center',
        fixed: 'left',
        showFixedIcon: true
      }
      fieldList.value.unshift(obj)
    }
        
  } catch (error) {
    if(process.env.NODE_ENV === 'development') console.log('初始化表头列表-错误', error);
  }
}
const colShow = (row) => {
  return (row.show != undefined ? row.show : true) && !row.showOtherPlace
}
// 将所有设置了左固定的列全部移至左部，将所有设置了右固定的列全部移右左部
const handleFiexSort = (arr) => {
  try {
    arr.sort((a, b) => {
      //  a 的 fixed 值为 'left' 且 b 的 fixed 值不为 'left'（可能为空或 'right'）
      if (a.fixed === 'left' && (b.fixed!== 'left' ||!b.fixed)) return -1 
      // 如果 b 的 fixed 值为 'left' 且 a 的 fixed 值不为 'left'（可能为空或 'right'）
      else if (b.fixed === 'left' && (a.fixed!== 'left' ||!a.fixed)) return 1 
      // 同理
      if (b.fixed === 'right' && (a.fixed!== 'right' ||!a.fixed)) return -1
      // 同理
      else if (a.fixed === 'right' && (b.fixed!== 'right' ||!a.fixed)) return 1
      // 其他情况保持原顺序
      else return 0
    })
  } catch (error) {
    if(process.env.NODE_ENV === 'development') console.log('排序', error);
  }
}
// 冻结列初始化
const fixedInit = () => {
  if(fieldList.value.length < 1) return
  try {
    handleFiexSort(fieldList.value) //排序
    //添加类名-冻结时阴影效果
    fieldList.value.forEach(item => {
      item.rightFirstFixed = false
      item.leftLastFixed = false
    })
    let rightFirstFixed = fieldList.value.find(item => item.fixed === 'right')
    if(rightFirstFixed) rightFirstFixed.rightFirstFixed = true
    let leftLastFixed = Array.from([...fieldList.value].reverse()).find(item => item.fixed === 'left' && colShow(item))
    if(leftLastFixed) leftLastFixed.leftLastFixed = true
    // 固定列定位
    fieldList.value.forEach((item, index) => {
      //固定列left赋值
      if(item.fixed === 'left'){ //左固定
        
        // 当前列前面所有固定列的宽度
        let preStickWidth = 0 
        let arr = fieldList.value.slice(0, index).filter(it => it.fixed === 'left' && colShow(it))
        arr.forEach(ele => {
          preStickWidth += ele.width || ele.realWidth
        })
        item.sticktStyle = {
          left: preStickWidth + 'px'
        }
      }else if(item.fixed === 'right'){ //右固定
        // 当前列后面所有固定列的宽度
        let nextStickWidth = 0 
        let arr = fieldList.value.slice(index + 1).filter(it => it.fixed === 'right' && colShow(it))
        arr.forEach(ele => {
          nextStickWidth += ele.width || ele.realWidth
        })
        item.sticktStyle = {
          right: nextStickWidth + 'px'
        }
      }
    })

  } catch (error) {
    if(process.env.NODE_ENV === 'development') console.log('冻结列初始化-错误',error);
  }
}
// 自适应宽度计算处理中（处理设置了最小宽度的列）
const handleCheckOverWidthCol = (scrollBox, usedWidth, defualtWidthColNum, minWidthColNum, cols) => {
  try {
    let average = (Number((scrollBox - usedWidth)/(defualtWidthColNum + minWidthColNum))) 
    // 超出平均宽度的设置了最小宽度的列
    let overWidhtColArr = fieldList.value.filter(item => {
      if(item?.minWidth > average && !item.minWidthAsWidth) return true
    }) 
    if(overWidhtColArr.length){
      overWidhtColArr.forEach(item => {
        item.minWidthAsWidth = true
        item.realWidth = item.minWidth
        usedWidth += item.minWidth
      })
      minWidthColNum = minWidthColNum - overWidhtColArr.length
      handleCheckOverWidthCol(scrollBox, usedWidth, (defualtWidthColNum - minWidthColNum), minWidthColNum, cols)
    }else{
      cols.forEach((col, cIndex) => { 
        let curCol = fieldList.value[cIndex]
        if(colShow(curCol) && !curCol.width && !curCol.minWidthAsWidth){
          curCol.realWidth = curCol.average
          col.setAttribute('width', average)
        }else if(curCol.minWidthAsWidth){
          col.setAttribute('width', curCol.minWidth)
        }
      });
    }
  } catch (error) {
    if(process.env.NODE_ENV === 'development') console.log('自适应宽度计算处理', error);
  }
}
// 自适应宽度计算处理
function calculateColumnWidths() {
  try {
    nextTick(()=>{
      const colgroup = ruifoxContentTableRef.value.querySelector("colgroup")
      if(!colgroup) return
      const cols = colgroup.querySelectorAll("col")
      let scrollBox = scrollbarRef.value.$el.scrollWidth
      let tableMinWidth = 0 //表格最小宽度（固定width + minWidth）
      let defualtWidthColNum = 0 //默认宽度列的数量
      let minWidthColNum = 0 //设置了最小宽度列的数量
      let usedWidth = 0
      cols.forEach((col, cIndex) => { 
        let curCol = fieldList.value[cIndex]
        if(colShow(curCol)){
          // console.log('colr',col.title,col.width);
          // 理论最小宽度为固定宽度width / 最小宽度minWidth / 列最小宽度minWidth 的总和
          tableMinWidth += Number(curCol.width || curCol.minWidth || minWidth.value)
          if(!curCol.width && !curCol.minWidth){ //默认宽度列
            defualtWidthColNum +=1
          }else if(!curCol.width && curCol.minWidth){ //设置了最小宽度的列
            minWidthColNum +=1
            // usedWidth += curCol.minWidth
          }else{ //设置固定宽度的列
            usedWidth += curCol.width
          }
        }
      });
      // 如果父级容器元素宽度比table大，处理剩余宽度
      if(scrollBox > tableMinWidth){
        tableOverWidth.value = false
        ruifoxContentTableRef.value.style.width = scrollBox + 'px'
        // 分两种情况：
        // 1.计算出的平均宽度比某一个最小宽度小，则去除该最小宽度，重新计算，以此类推
        // 2.计算出的平均宽度比所有设置了最小宽度的列都大，直接设置宽度即可
        handleCheckOverWidthCol(scrollBox, usedWidth, defualtWidthColNum, minWidthColNum, cols)
      }else{
        tableOverWidth.value = true
        ruifoxContentTableRef.value.style.width = tableMinWidth + 'px'
        cols.forEach((col, cIndex) => { 
          let curCol = fieldList.value[cIndex]
          if(colShow(curCol) && !curCol.width && !curCol.minWidth){
            col.setAttribute('width', curCol.width || minWidth.value)
          }else if(curCol.minWidth){
            col.setAttribute('width', curCol.minWidth)
          }
        });
      }
    })
  } catch (error) {
    if(process.env.NODE_ENV === 'development') console.log('自适应宽度计算处理-错误', error);
  }
}
// 未使用插槽时展示默认值
const showValue = (item, keyArr) => {//数组key处理
  if (Object.prototype.toString.call(keyArr) === '[object Array]') {
    for (let i = 0; i < keyArr.length; i++) {
      if (!(item[keyArr[i]] === '' || item[keyArr[i]] === undefined || item[keyArr[i]] === null)) {
        return item[keyArr[i]]
      }
    }
  } else if (Object.prototype.toString.call(keyArr) === '[object String]') {
    return item[keyArr]
  }
}
// 排序
const handleSort = (e) => {
  emits('handleSort', e)
}
// 排序
const handleContentAdd = (e) => {
  emits('handleContentAdd', e)
}
// 监听表格横向滚动
const scrollbarRef = ref()
const ruifoxContentTableRef = ref()
const isBeforeVisible = ref(false)
const isEndRightVisible = ref(null)
const handleTableScroll = (scrollLeft) => {
  const w = scrollbarRef.value.$el.scrollWidth
  const c = ruifoxContentTableRef.value?.clientWidth
  if(scrollLeft.scrollLeft){ //是否有滚动条
    isBeforeVisible.value = true
    if(scrollLeft.scrollLeft >= c - w){ //是否滚动到最右边
      isEndRightVisible.value = true
    }else{
      isEndRightVisible.value = false
    }
  }else{
    isBeforeVisible.value = false
  }
  //拖动真实表格 触发模拟滚动条拖动
  if(topScroll.value) topScroll.value.scrollTo(scrollLeft.scrollLeft, 0);
}
// 自定列修改后手动更新滚动条
const handleColCheckChange = () => {
  try {
    nextTick(() => { 
      const w = scrollbarRef.value.$el.scrollWidth
      const c = ruifoxContentTableRef.value?.clientWidth
      if(c > w){ //是否滚动到最右边
        isEndRightVisible.value = false
      }else{
        isEndRightVisible.value = true
      }
      // if(tableData.value.length) calculateColumnWidths()
      if(scrollbarRef.value) {
        scrollbarRef.value.update()
        fixedInit()
      }
    })
  } catch (error) {
    if(process.env.NODE_ENV === 'development') console.log('自定列修改后手动更新滚动条-错误', error);
  }
}

// 手动修改冻结列操作
const handleFixed = (row, fiexdText) => {
  row.fixed = fiexdText
  fixedInit() //冻结列初始化
}

// 列状态条件筛选
const handleStatusClick = (col, val) => {
  let params = {
    key: col.name,
    value: val.value
  }
  emits('handleSearch', params)
}

// 固定横向滚动条
const topScrollWidth = ref(0)
const topScroll = ref()
const affixRefScroll = ref()
const setScrollWidth = () => {
  //设置横向滚顶条宽度值为表格的滚动宽度
  nextTick(() => {
    if(ruifoxContentTableRef.value) topScrollWidth.value = ruifoxContentTableRef.value?.clientWidth + 'px'
    setTimeout(() => {
      if(affixRefScroll.value) affixRefScroll.value.updateRoot()
    }, 0);
  })
}

watch(()=>topScrollWidth.value,()=>{
  nextTick(()=>{
    //拖动模拟滚动条 触发真实表格拖动
    if(topScroll.value){
      topScroll.value.addEventListener('scroll', () => {
        // 表格底部滚动条与顶部同步
        scrollbarRef.value.setScrollLeft(topScroll.value.scrollLeft)
      })
    }
  })
})
watch(fieldList, (newVal, oldVal) => {
  try {
    nextTick(()=>{
      if(oldVal.length < 1 && newVal.length > 0){ //首次加载触发
        handleDealFieldList() //初始化表头列表（添加序号。多选框等）
        fixedInit() //冻结列初始化
      }
      if(newVal.length > 0){
        calculateColumnWidths()
        setScrollWidth()
      }
    })
  } catch (error) {
    if(process.env.NODE_ENV === 'development') console.log('监听fieldList-错误', error);
  }
},{deep:true})
watch(tableData, () => {
  handleDealFieldList() 
  calculateColumnWidths()
  handleColCheckChange()
},{
  deep:true,
  immediate:true
})

onMounted(() => {
  handleColCheckChange() //第一次手动触发表格滚动条
})
</script>
<style lang="scss" scoped>
// 可拖动表格样式
::v-deep(.ruifox-table-new),
.ruifox-table-new {
  border-collapse:collapse;
  table-layout: fixed;
  thead{
    tr{
      width: 100%;
      background: #eff3f8;
      th{
        padding: 10px 0;
        border-bottom: 1px solid #C0C6CC;
        box-sizing: border-box;
        min-width: 0;
        text-overflow: ellipsis;
        vertical-align: middle;
        .cell{
          color: #333333;
          font-size: 12px;
          font-weight: 500;
          box-sizing: border-box;
          line-height: 1.5;
          overflow: hidden;
          overflow-wrap: break-word;
          padding: 0 6px;
          text-overflow: ellipsis;
          white-space: nowrap;
          .default-table-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .default-table-header-left,
            .default-table-header-right{
              display: flex;
              justify-content: center;
              align-items: center;
              .icon-option{
                position: relative;
                font-size: 14px;
                margin-left: 5px;
                color: #999;
                cursor: pointer;
                &:hover{
                  color: #666;
                  &::before{
                    display: block;
                  }
                }
                &::before{
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
                  width: 100%;
                  height: 100%;
                  padding: 5px 3px;
                  z-index: -1;
                  display: flex;
                  background: #e6e6e6;
                  border-radius: 3px;
                  display: none;
                }
              }
              .fixed-icon{
                display: none;
              }
            }
          }
        }
        &:hover{
          .cell {
            color: #000;
          }
          .fixed-icon{
            display: block !important;
          }
        }
      }
    }
  }
  tbody{
    tr{
      width: 100%;
      td{
        padding: 10px 0;
        // border-bottom: 1px solid #E4E4E4;
        border-bottom: 1px solid #e3e4e6;
        // transition: background-color .25s ease;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        height: 45px;
        .cell{
          font-size: 12px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          overflow-wrap: break-word;
          padding: 0 6px;
          line-height: 1.5;
          font-variant: tabular-nums;
          box-sizing: border-box;
          user-select: none;
        }
      }
      td.show-text-tip .cell{
        white-space: nowrap;
      }
    }
    tr:hover{
      background-color: $checkColor;
      .col-left-fixed,
      .col-right-fixed{
        background-color: $checkColor;
      }
      .table-td-top .ding-no{
        visibility: visible;
      }
    }
    .drag-class{
      background-color: $focusContent;
    }
  }
  /* 冻结 */
  .col-left-fixed,
  .col-right-fixed{
      position: sticky;
      left: 0;
      right: 0px;
      /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
      z-index: 1; //列强制最顶层
      background: #fff;
  }
  th.col-left-fixed,
  th.col-right-fixed{
    background: #eff3f8;
  }
  // 冻结时阴影效果
  .col-left-fixed.left-last-fixed{
    &::before{
      content: "";
      position: absolute;
      top: 0px;
      width: 10px;
      right: -4px;
      bottom: -1px;
      overflow-x: hidden;
      overflow-y: hidden;
      box-shadow: none;
      touch-action: none;
      pointer-events: none;
      box-shadow:inset 10px 0 10px -10px rgba(0, 0, 0, .15);
    }
  }
  .col-right-fixed{
    padding-left: 5px;
  }
  .col-right-fixed.right-first-fixed{
    &::before{
      content: "";
      position: absolute;
      top: 0px;
      left: -10px;
      width: 10px;
      bottom: -1px;
      overflow-x: hidden;
      overflow-y: hidden;
      box-shadow: none;
      touch-action: none;
      pointer-events: none;
      box-shadow:inset -10px 0 10px -10px rgba(0, 0, 0, .15);
    }
  }
}
.can-drag{
  tbody{
    tr{
      cursor: move;
    }
  }
}
.choose-title{
  position: absolute;
  top: 9px !important;
  right:20px;
  z-index: 100;
  cursor: pointer;
  i{
    color: $mainColor;
    font-size: 14px;
  }
}
.ruifox-table-new-choose-list{
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  overflow-y: auto;
  li{
    list-style: none;
  }
}
.ruifox-table-new-no-data{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  height: 400px;
  &>i{
    font-size: 80px;
    color: $placeholderColor;
  }
  &>span{
    font-size: 14px;
    color: $placeholderColor;
    margin-top: 10px;
  }
}
::v-deep(.table-srollbar) {
  .el-scrollbar__bar{
    visibility: hidden;
  }
}
.top-scroll {
  width: 100%;
  overflow-x: auto;
  &::-webkit-scrollbar {
    width: 3px; /* 滚动条的宽度 */
    height: 10px;
    background-color: #f5f5f5; /* 滚动条的背景颜色 */
  }
}
.top-scroll-content {
  /* 高度不设置的话滚动条出不来 */
  height: 1px; 
}
</style>
